<template>
  <bg-modal ref="bgRef" :top="177" @cancel="onCancel">
    <view
      style="
        position: absolute;
        top: 0;
        height: 800rpx;
        width: 100%;
        background: white;
        border-radius: 0 0 24rpx 24rpx;
      ">
      <view style="height: 610rpx; overflow-y: scroll; padding: 20rpx">
        <slot></slot>
      </view>
      <view
        style="
          display: flex;
          border-top: 1rpx #eee solid;
          text-align: center;
          line-height: 80rpx;
          padding: 32rpx;
          font-size: 32rpx;
        ">
        <view
          @click="onReset"
          style="
            width: 333rpx;
            height: 80rpx;
            border-radius: 12rpx;
            border: 1rpx solid #d1d1d1;
            color: #222222;
          ">
          重置
        </view>
        <view
          @click="onOK"
          style="
            width: 333rpx;
            height: 80rpx;
            background: #042275;
            border-radius: 12rpx;
            margin-left: 20rpx;
            color: #fff;
          ">
          确定
        </view>
      </view>
    </view>
  </bg-modal>
</template>

<script setup>
  import { ref } from 'vue'
  import bgModal from './bg-modal.vue'
  const bgRef = ref(null)
  const emits = defineEmits(['reset', 'ok', 'cancel'])
  const onReset = () => {
    bgRef.value.hide()
    emits('reset')
  }
  const onOK = () => {
    bgRef.value.hide()
    emits('ok')
  }
  function onCancel() {
    emits('cancel')
  }
  defineExpose({
    show: () => bgRef.value.show(),
    hide: () => bgRef.value.hide()
  })
</script>

<style></style>
